<template>

  <n-modal class="deposit_modal tips_sm_modal" :show="showModal" :mask-closable="false">
    <n-card class="form_card" :bordered="false" size="huge" role="dialog" aria-modal="true">
      <div class="form_container vertical">
        <div class="header rel center">
          <span class="weight_5 t_md">{{ t('paymentManagement_page_information') }}</span>
          <span class="close abs center pointer t_sm">
            <iconpark-icon @click="onClose" icon-id="tanctongyguanb" color="#fff" size="1em"></iconpark-icon>
          </span>
        </div>

        <div class="body vertical center t_md">
          <div class="calibration_box">
            <!-- 银行卡绑定 -->
            <div v-if="payWayObj.paymethod == 1" class="item-list bank">
              <n-flex class="item-list-tips" justify="space-between" align="center">
                <p class="title_txt">{{ t('paymentManagement_page_oneBank') }}</p>
                <iconpark-icon v-if="bankError" icon-id="qiandaoiconyqdw01" size=".94rem"></iconpark-icon>
                <iconpark-icon v-else icon-id="qiandaoiconyqdw02" size=".94rem"></iconpark-icon>
              </n-flex>
              <div class="bankForm" v-if="!bankError">
                <n-form ref="formBankRef" :model="formBank" :rules="rules.bankRules" class="w_full choose_bank">
                  <n-form-item :label="t('addBank_page_pChooseBank')">
                    <n-flex class="choose_bank">
                      <n-flex align="center" class="choose_bank_l">
                        <span class="bank_cname"> {{ chooseBank.label }} </span>
                        <!--                        <iconpark-icon icon-id="fangxiangicon02" color="#fff" size="1.458rem"></iconpark-icon>-->
                      </n-flex>
                      <a class="change_btn button_color" @click="showChangeBank"> {{ t('deposit_page_changeWay') }} </a>
                    </n-flex>
                  </n-form-item>

                  <n-form-item :label="t('addBank_page_bankCard')" path="cardNo">
                    <n-input size="large" @input="(e: any) => {validateInput(e, 'cardNo')}" v-model:value="formBank.cardNo"
                      :placeholder="t('paymentManagement_page_chCardNo')">
                      <!--                      <template #suffix>
                        <a class="refresh_icon"></a>
                      </template>-->
                    </n-input>
                  </n-form-item>
                  <n-form-item :label="t('addBank_page_name')" path="accountName">
                    <n-input size="large" :disabled="!!mySecBankList.cardholder_name"
                      v-model:value="formBank.accountName" :placeholder="t('paymentManagement_page_enterBank')">
                      <!--                      <template #suffix>
                        <a class="refresh_icon"></a>
                      </template>-->
                    </n-input>
                  </n-form-item>
                </n-form>
                <div class="cz_btn">
                  <a class="button_color" @click="submitContent('bank')"> {{ t('home_page_confirm') }} </a>
                </div>
                <n-flex v-show="!(formBank.cardNo && formBank.accountName) && !bankError" class="error_txt"
                  justify="center">
                  <iconpark-icon icon-id="cztishi01" size=".94rem"></iconpark-icon>
                  {{ t('paymentManagement_page_error_msg') }}
                </n-flex>
              </div>

              <div class="cardItem bankCard" v-if="bankError">
                <n-flex class="bank_list" justify="center">
                  <n-flex align="center" class="bank_item">
                    <div class="bank_l_icon">
                      <Imgt :src="`/img/bankIcon/bank_logo_${formBank.bank}.webp`" alt="nodata" />
                    </div>
                    <div class="bank_l_name">
                      <p>
                        <span>{{ formBank.bankName }}</span>
                      </p>
                      <p> <span>*******</span></p>
                      <p>{{ maskTxtString(formBank.cardNo) }}</p>
                    </div>
                  </n-flex>
                </n-flex>
              </div>
            </div>

            <!-- USDT绑定 -->
            <div v-if="payWayObj.paymethod == 2" class="item-list bank">
              <n-flex class="item-list-tips" justify="space-between" align="center">
                <p class="title_txt">{{ t('paymentManagement_page_oneUsdt') }}</p>
                <iconpark-icon v-if="usdtError" icon-id="qiandaoiconyqdw01" size=".94rem"></iconpark-icon>
                <iconpark-icon v-else icon-id="qiandaoiconyqdw02" size=".94rem"></iconpark-icon>
              </n-flex>
              <!-- 未绑定 usdt -->
              <div class="bankForm" v-if="!usdtError">
                <n-form ref="formBankRef" :model="usdtForm" class="w_full choose_bank">
                  <n-form-item :label="t('deposit_page_chooseNetWork')">
                    <n-select v-model:value="usdtForm.usdt_type" :options="netWorkArr" />
                  </n-form-item>
                  <n-form-item :label="t('withdraw_page_usdtAdd')">
                    <n-input size="large" v-model:value="usdtForm.usdt_addr"
                      :placeholder="t('paymentManagement_page_usdt_tips')">
                    </n-input>
                  </n-form-item>
                  <n-form-item :label="t('paymentManagement_page_remark')">
                    <n-input size="large" v-model:value="usdtForm.desc"
                      :placeholder="t('paymentManagement_page_remark')">
                    </n-input>
                  </n-form-item>
                </n-form>
                <div class="cz_btn">
                  <a class="button_color" @click="submitContent('usdt')"> {{ t('home_page_confirm') }} </a>
                </div>
                <n-flex v-show="!(usdtForm.usdt_addr) && !usdtError" class="error_txt" justify="center">
                  <iconpark-icon icon-id="cztishi01" size=".94rem"></iconpark-icon>
                  {{ t('paymentManagement_page_error_msg') }}
                </n-flex>
              </div>
              <!-- 已绑定 usdt -->
              <div class="cardItem bankCard" v-if="usdtError">
                <n-flex class="bank_list" justify="center">
                  <n-flex align="center" class="bank_item">
                    <div class="bank_l_name usdt_l_name">
                      <p>
                        {{ netWorkArr.find((item) => item.value == usdtForm.usdt_type)?.label }}
                      </p>
                      <p>{{ usdtForm.usdt_addr }}</p>
                      <p class="txt_ellipsis">{{ usdtForm.desc }}</p>
                    </div>
                  </n-flex>
                </n-flex>
              </div>
            </div>

            <!-- 绑定手机信息 -->
            <div class="item-list info">
              <n-flex class="item-list-tips" justify="space-between" align="center">
                <p class="title_txt">{{ t('paymentManagement_page_bindMobile') }}</p>
                <iconpark-icon v-if="phoneError" icon-id="qiandaoiconyqdw01" size=".94rem"></iconpark-icon>
                <iconpark-icon v-else icon-id="qiandaoiconyqdw02" size=".94rem"></iconpark-icon>
              </n-flex>
              <div class="phoneForm" v-if="!phoneError">
                <n-form ref="formInfoRef" :model="formInfo" :rules="rules.infoRules">
                  <n-form-item :label="t('paymentManagement_page_phoneNum')" path="phone">
                    <n-popselect v-model:value="formInfo.codeValue" :options="codeOptions" @update:value="valueChange"
                      trigger="click">
                      <span class="code_box">
                        <span>+{{ formInfo.codeValue }}</span>
                        <iconpark-icon icon-id="fangxiangicon02" color="#8e82c2" size="1rem"></iconpark-icon>
                      </span>
                    </n-popselect>
                    <n-input clearable size="large" v-model:value="formInfo.phone"
                      :placeholder="t('home_page_enterPhoneNumber')"></n-input>
                  </n-form-item>

                  <n-flex justify="space-between" align="center">
                    <n-form-item :label="t('home_page_smsCode')" path="phoneCode" style="flex: 1;">
                      <n-input clearable size="large" v-model:value="formInfo.phoneCode"
                        :placeholder="t('home_page_enterVerificationCode')"></n-input>
                    </n-form-item>
                    <n-button :bordered="false" :loading="phoneCodeLoading" @click="submitSendPhoneCode"
                      class="button_color btn" :disabled="phoneCodeDisabled">{{ phoneCodeText }}
                    </n-button>
                  </n-flex>

                </n-form>
                <div class="cz_btn">
                  <a class="button_color" @click="submitContent('code')"> {{ t('home_page_confirm') }} </a>
                </div>
                <n-flex v-show="!(formInfo.phone && formInfo.phoneCode) && !phoneError" class="error_txt"
                  justify="center">
                  <iconpark-icon icon-id="cztishi01" size=".94rem"></iconpark-icon>
                  {{ t('paymentManagement_page_error_msg') }}
                </n-flex>
              </div>
              <div class="cardItem phoneCard" v-if="phoneError">
                <n-flex class="bank_list">
                  <n-flex align="center" class="bank_item">
                    <div class="bank_l_icon">
                      <Imgt src="/img/wallet/phone.webp" alt="nodata" />
                    </div>
                    <div class="bank_l_name">
                      <p>
                        <span>+84</span>
                      </p>
                      <p>{{ maskTxtString(formInfo.phone, 3) }}</p>
                    </div>
                  </n-flex>
                </n-flex>
              </div>
            </div>

            <!-- 设置资金密码 -->
            <div class="item-list capital">
              <n-flex class="item-list-tips" justify="space-between" align="center">
                <p class="title_txt">{{ t('paymentManagement_page_setPayPwd') }}</p>
                <iconpark-icon v-if="capitalError" icon-id="qiandaoiconyqdw01" size=".94rem"></iconpark-icon>
                <iconpark-icon v-else icon-id="qiandaoiconyqdw02" size=".94rem"></iconpark-icon>
              </n-flex>
              <div class="capitalForm" v-if="!capitalError">
                <n-form ref="formCapitalRef" :model="formCapital" :rules="rules.capital" class="w_full choose_bank">
                  <n-form-item :label="t('paymentManagement_page_setPwd')" path="capitalPin">
                    <n-input size="large" @input="(e: any) => {validateInput(e, 'capitalPin')}" v-model:value="formCapital.capitalPin" :type="changeRightInfo.pwd1.type"
                      :placeholder="t('paymentManagement_page_plSetPayPwd')">
                      <template #suffix>
                        <iconpark-icon @click="iconClick('pwd1')" :icon-id="changeRightInfo.pwd1.icon"
                          size="1em"></iconpark-icon>
                      </template>
                    </n-input>
                  </n-form-item>
                  <n-form-item :label="t('paymentManagement_page_repPwd')" path="capitalPinAgain">
                    <n-input size="large" @input="(e: any) => {validateInput(e, 'capitalPinAgain')}" v-model:value="formCapital.capitalPinAgain" :type="changeRightInfo.pwd2.type"
                             :placeholder="t('home_page_secPwd')">
                      <template #suffix>
                        <iconpark-icon @click="iconClick('pwd2')" :icon-id="changeRightInfo.pwd2.icon"
                          size="1em"></iconpark-icon>
                      </template>
                    </n-input>
                  </n-form-item>
                </n-form>

                <!--                  <div class="cz_btn">-->
                <!--                    <a @click="submitCapital"> 确认 </a>-->
                <!--                  </div>-->
              </div>

              <div class="cardItem" v-if="capitalError">
                <p class="button_color">
                  {{ t('paymentManagement_page_setFinish') }}
                </p>
              </div>
              <div v-else class="cz_btn">
                <a class="button_color" @click="submitContent('pwd')"> {{ t('home_page_confirm') }} </a>
              </div>
              <n-flex v-show="!(formCapital.capitalPin && formCapital.capitalPinAgain) && !capitalError"
                class="error_txt" justify="center">
                <iconpark-icon icon-id="cztishi01" size=".94rem"></iconpark-icon>
                {{ t('paymentManagement_page_error_msg') }}
              </n-flex>
            </div>

          </div>
        </div>
      </div>
    </n-card>
  </n-modal>

  <!-- 选择银行弹窗 -->
  <ChooseBankDialog ref="chooseBankModal" @selectBank="selectBank" />

</template>

<script setup lang="ts">
import { defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { MessageEvent2 } from '@/net/MessageEvent2';
import { NetMsgType } from '@/netBase/NetMsgType';
import { NetPacket } from '@/netBase/NetPacket';
import H5Websocket from "@/net/Net1";
import {
  testBankCard,
  verifyMobile,
  verifyPhoneCaptcha,
  testBankName,
  replaceChinese
} from '@/utils/is.ts';
import { Message } from '@/utils/discreteApi.ts';
import { storeToRefs } from 'pinia';
import pinia from '@/store';
import { User } from '@/store/user';
import { aaa, bbb, getDeviceId, getRandomSign } from '@/net/Utils.ts';
// import { needLoginApi } from '@/utils/useNetMethods';
import { IP, validateCryptoAddress } from '@/utils/others.ts';
import Imgt from '@/components/Imgt.vue';
import { maskTxtString } from '@/utils/others.ts';
import { verifyWithdraw } from '@/utils/validateTools.ts';

const ChooseBankDialog = defineAsyncComponent(() => import('../components/chooseBankDialog.vue'));

const UserStore = User(pinia);
const { info: userInfo, roleInfo } = storeToRefs(UserStore);
const chooseBankModal = ref();
const props = defineProps({
  myBankList: {
    type: Object,
    default: () => {
    },
  },
  usdtBankList: {
    type: Object,
    default: () => {
    },
  },
  payWayObj: { // payWayObj.paymethod : 1 银行， 2 usdt
    type: Object,
    default: () => {
    },
  }
});
const emit = defineEmits(["upDateAllList"]);
const netWorkArr = [
  { label: 'TRC20', value: 1 },
  { label: 'ERC20', value: 2 },
];
const { t } = useI18n();
const showModal = ref(false);
const chooseBank = ref({ label: '', value: '' }); // 选择的银行卡
const mySecBankList = ref(props.myBankList);
const mySecUsdtList = ref(props.usdtBankList);
const changeRightInfo: any = ref({
  pwd1: {
    icon: 'gerenyincangicon',
    type: 'password'
  },
  pwd2: {
    icon: 'gerenyincangicon',
    type: 'password'
  }
})
const phoneCodeLoading = ref(false);
const phoneCodeDisabled = ref(true);
const phoneCodeText = ref<string | number>(t('home_page_send'));
const bankError = ref(false);
const usdtError = ref(false);
// 添加银行信息
const formBankRef = ref();
const phoneError = ref(false);
const formInfoRef = ref();
const capitalError = ref(false);
const formCapitalRef = ref();
const formBank: any = ref( // 存款表单提交
  {
    bank: '',
    bankName: '',
    cardNo: '',
    accountName: '',
  },
);
// usdt-提交参数
const dataParams = {
  usdt_type: 1,
  usdt_addr: '',
  desc: '',
}
const usdtForm = ref( // 表单提交
  { ...dataParams }
);

const formInfo = ref({
  codeValue: '84',
  phone: '',
  phoneCode: '',
});

const formCapital: any = ref({
  capitalPin: '',
  capitalPinAgain: '',
});

const codeOptions = [
  {
    label: '84',
    value: '84',
  },
];
const rules = {
  bankRules: {
    cardNo: {
      // required: true,
      message: t('paymentManagement_page_chCardNo'),
      trigger: 'input',
    },
    accountName: {
      // required: true,
      message: t('paymentManagement_page_enterBank'),
      trigger: 'input',
    },
  },
  infoRules: {
    phone: [
      {
        // required: true,
        validator: () => {
          if (verifyMobile(formInfo.value.codeValue, formInfo.value.phone)) {
            phoneCodeDisabled.value = false;
            return true;
          } else {
            phoneCodeDisabled.value = true;
            return false;
          }
        },
        message: t('home_page_phoneNumberFormatIncorrect'),
        trigger: 'input',
      },
    ],

    phoneCode: [
      {
        // required: !0,
        trigger: 'blur',
        validator: (rule: any, value: string) => {
          if (!value) {
            return new Error(t('home_page_enterSmsCode'));
          } else if (verifyPhoneCaptcha(rule, value)) {
            return true;
          } else {
            return new Error(t('home_page_smsCodeFormatIncorrect'));
          }
        },


      },
    ],
  },

  capital: {
    capitalPin: [
      {
        // required: !0,
        trigger: 'blur',
        validator: (_rule: any, value: string) => {
          if (!value) {
            return new Error(t('paymentManagement_page_payPwdTips', {min:6 ,max: 8}));
          } else if (verifyWithdraw(value)) {
            return true;
          } else {
            return new Error(t('paymentManagement_page_payPwdTips', {min:6 ,max: 8}));
          }
        },


      },
    ],

    capitalPinAgain: [
      {
        required: !0,
        trigger: 'blur',
        validator: (_rule: any, value: string) => {
          if (!value) {
            return new Error(t('paymentManagement_page_payPwdTips', {min:6 ,max: 8}));
          } else if (verifyWithdraw(value)) {
            return true;
          } else {
            return new Error(t('home_page_passwordsInconsistent'));
          }
        },

      },
    ],
  },
};

// 限制只能输入输入数字, formBank.value.cardNo
const validateInput = (val: any, field: any) => {
  const txt = val.replace(/[^0-9]/g, '');
  if (['cardNo'].includes(field)) {
    formBank.value[field] = txt
  } else {
    formCapital.value[field] = txt
  }
}

const iconClick = (type: any) => {
  if (changeRightInfo.value[type].icon == "gerenyincangicon") {
    changeRightInfo.value[type].type = "text"
    changeRightInfo.value[type].icon = "gerenchakanicon"
  } else {
    changeRightInfo.value[type].type = "password"
    changeRightInfo.value[type].icon = "gerenyincangicon"
  }
}

const openModal = () => {
  showModal.value = true;
  nextTick(() => {
    getInfo();
  });
};
const onClose = () => {
  showModal.value = false;
};

const valueChange = (item: any) => {
  console.log(item);
};

const submitSendPhoneCode = () => {
  phoneCodeLoading.value = true;
  const req = NetPacket.req_get_mobile_sms_code();
  req.mobile = formInfo.value.codeValue + formInfo.value.phone;
  req.operate_type = 1;
  H5Websocket.sendMessageHandler(req);
};

// // 返回手机验证码是否发送
const handleSMSback = (res: any) => {
  phoneCodeLoading.value = false;
  if (res.code == 1) {
    if (res.message) {
      Message.success(t(res.message));
    }
    let timer = 180;
    phoneCodeDisabled.value = true;
    phoneCodeText.value = timer;
    let timeInterval = setInterval(() => {
      phoneCodeText.value = timer--;
      if (timer <= 0) {
        clearInterval(timeInterval);
        phoneCodeDisabled.value = false;
        phoneCodeText.value = t('home_page_send');
      }
    }, 1000);
  } else {
    phoneCodeDisabled.value = false;
  }
};

// 下一步按钮
const submitContent = (type: any) => {
  // 判断是否绑定银行卡
  // if (capitalError.value) {
  //   Message.success(t('paymentManagement_page_withCompleted'));
  // }
  if (type === 'bank') {
    submitBank();
  }
  if (type === 'usdt') {
    handleSubmit();
  }
  if (type === 'code') {
    submitPhone();
  }
  if (type === 'pwd') {
    submitCapital();
  }
};

const submitBank = () => {
  if (!formBank.value.bank) {
    return Message.error(t('paymentManagement_page_chBank'))
  }
  if (!formBank.value.cardNo) {
    return Message.error(t('paymentManagement_page_chCardNo'))
  }
  if (!testBankCard(formBank.value.cardNo)) {
    return Message.error(t('paymentManagement_page_tip1'))
  }
  if (!formBank.value.accountName) {
    return Message.error(t('paymentManagement_page_chName'))
  }
  if (!testBankName(formBank.value.accountName)) {
    formBank.value.accountName = replaceChinese(formBank.value.accountName);
    return Message.error(t('paymentManagement_page_chName'))
  }
  formBankRef.value?.validate((errors: any) => {
    if (!errors) {
      const req = NetPacket.req_new_bank_card_info();
      req.bank_id = formBank.value.bank;
      req.account_number = formBank.value.cardNo;
      req.cardholder_name = mySecBankList.value.cardholder_name ? mySecBankList.value.cardholder_name : formBank.value.accountName?.replace(/\s+/g, '').toUpperCase(); // 保存需要去除空格和转大写
      H5Websocket.sendMessageHandler(req);
    } else {
      console.log(errors);
    }
  });
};
// result: 2 // 1 成功，2 失败
const handleAddBank = (res: any) => {
  const tips: any = {
    1: 'paymentManagement_page_addBankSuc',
    2: 'paymentManagement_page_addBankFail',
    3: 'paymentManagement_page_acc_already',
  }
  if (res.result === 1) {
    emit('upDateAllList'); // 刷新列表
    bankError.value = true;
    Message.success(t(tips[res.result]));
  } else {
    Message.error(t(tips[res.result]));
  }
};

// 绑定USDT提交
const handleSubmit = () => {
  console.log('usdt提交----', usdtForm.value)
  if (!usdtForm.value.usdt_type) {
    return Message.error(t('deposit_page_chooseNetWork'))
  }
  if (!usdtForm.value.usdt_addr) {
    return Message.error(t('paymentManagement_page_usdt_tips'))
  }
  if (!validateCryptoAddress(usdtForm.value.usdt_addr, usdtForm.value.usdt_type)) {
    return Message.error(t('usdt_bind_fail2'))
  }
  const req = NetPacket.req_add_usdt_info();
  req.usdt_type = usdtForm.value.usdt_type;
  req.usdt_addr = usdtForm.value.usdt_addr;
  req.desc = usdtForm.value.desc;
  H5Websocket.sendMessageHandler(req);
};
// result: 2 // 1 成功，2 失败
const handleAddUsdt = (res: any) => {
  const tips: any = {
    1: 'paymentManagement_page_addBankSuc',
    2: 'paymentManagement_page_errorAdd',
    3: 'paymentManagement_page_addBankFail',
    4: 'paymentManagement_page_hasAdd',
  }
  if (res.result === 1) {
    emit('upDateAllList'); // 刷新列表
    usdtError.value = true;
    Message.success(t(tips[res.result]))
  } else {
    Message.error(t(tips[res.result]))
  }
}

const submitPhone = () => {
  // phoneError.value = true;
  formInfoRef.value?.validate(async (errors: any) => {
    if (!errors) {
      let req = NetPacket.req_bind_modify_email();
      req.email = formInfo.value.codeValue + formInfo.value.phone;
      req.username = userInfo.value?.full_name;
      req.captcha = formInfo.value.phoneCode;
      req.operate_type = 3;
      req.agent_id = roleInfo.value.id; //Local.get('agentid')
      req.aaa = aaa;
      req.bbb = bbb;
      // req.ip = await IP();
      req.ip = await IP();
      let id = await getDeviceId();
      req.sign = getRandomSign(id);
      H5Websocket.sendMessageHandler(req);
      // phoneError.value = true;
    } else {
      console.log(errors);
    }
  });
};

// 返回是否绑定成功--手机号
const handleChangeEmail = (res: any) => {
  if (res.code == 1) {
    Message.success(t(res.message));
    // needLoginApi();
    setTimeout(() => {
      phoneError.value = true;
    }, 3000);
  }
};
//  绑定资金Form
const submitCapital = () => {
  formCapitalRef.value?.validate(async (errors: any) => {
    if (!errors) {
      bindMoneyPassword();
    } else {
      console.log(errors);
    }
  });
};

// 绑定资金密码
const bindMoneyPassword = () => {
  let req = NetPacket.req_bind_or_modify_withdraw_password();
  req.operate_type = 1;
  req.old_password = '';
  req.new_password = formCapital.value.capitalPin;
  req.role_id = roleInfo.value?.id;
  req.new_password_confirm = formCapital.value.capitalPinAgain;
  H5Websocket.sendMessageHandler(req);
};

const handleBindOrModifyWithdrawPassword = (res: any) => {
  if (res.code == 1) {
    Message.success(t(res.message));
    capitalError.value = true;
    Message.success(t('paymentManagement_page_withCompleted'));
    // needLoginApi();
  }
};

// 更换银行弹窗
const showChangeBank = () => {
  chooseBankModal.value.onCloseBank();
};

// 选择银行
const selectBank = (e: any) => {
  formBank.value.bank = e.value;
  formBank.value.bankName = e.label;
  // formBank.accountName
  chooseBank.value = e;
};

// 获取已绑定的银行账号
const getInfo = () => {
  console.log('---props.myBankList--', mySecBankList.value);
  formBank.value.accountName = mySecBankList.value.cardholder_name || '';
  // 银行卡--未绑定银行卡跳转到绑定银行卡`
  if (props.payWayObj.paymethod == 1 && mySecBankList.value.bank_card_info_list && mySecBankList.value.bank_card_info_list.length) {
    const { bank_name, account_number, bank_id } = mySecBankList.value.bank_card_info_list[0];
    formBank.value.bank = bank_id;
    formBank.value.cardNo = account_number;
    formBank.value.bankName = bank_name || '';
    bankError.value = true;
  }
  // usdt
  if (props.payWayObj.paymethod == 2 && mySecUsdtList.value && mySecUsdtList.value.length) {
    const { usdt_type, usdt_addr, desc } = mySecUsdtList.value[0];
    usdtForm.value.usdt_type = usdt_type;
    usdtForm.value.usdt_addr = usdt_addr;
    usdtForm.value.desc = desc || '';
    usdtError.value = true;
  }

  formInfo.value.phone = userInfo.value.mobile || '';
  phoneError.value = Boolean(userInfo.value.mobile);
  capitalError.value = Boolean(roleInfo.value.withdraw_pwd);
};

watch(() => showModal.value, (n) => {
  // 打开
  if (n) {
    // 绑定银行卡
    MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_req_new_bank_card_info, handleAddBank);
    // 绑定usdt
    MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_add_usdt_info, handleAddUsdt);
  } else {
    MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_req_new_bank_card_info, null);
    MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_add_usdt_info, null);
  }
})
watch(() => props.myBankList, (n) => {
  console.log('银行列表有更新===', n)
  mySecBankList.value = n;
})
watch(() => props.usdtBankList, (n) => {
  console.log('usdt列表有更新===', n)
  mySecUsdtList.value = n;
})

onMounted(() => {
  // 绑定手机号
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_bind_modify_email, handleChangeEmail);
  // 发送验证码
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_get_mobile_sms_code, handleSMSback);
  // 绑定资金密码
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_bind_or_modify_withdraw_password, handleBindOrModifyWithdrawPassword);
});

onUnmounted(() => {
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_get_mobile_sms_code, null);
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_bind_modify_email, null);
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_bind_or_modify_withdraw_password, null);
});

defineExpose({
  openModal,
});

</script>

<style lang="less" scoped>
@import '@/assets/CommonForm.less';
@timestamp: `new Date().getTime()`;

.deposit_modal {
  font-size: 16px;

  .body {
    padding: 20px 60px;

    .item-list {
      background: #0D0E2E;
      padding: 24px 27px;
      border-radius: 16px;
      margin-bottom: 20px;

      .item-list-tips {
        margin: 0 0 10px;

        .title_txt {
          padding: 0;
          margin: 0;
          color: #AEAEB0;
        }
      }

      :deep(.n-form-item) {
        grid-template-rows: auto !important;

        .n-form-item-label {
          padding: 0;
          color: #fff;
          font-size: 16px;
          height: auto;
          min-height: auto;
        }

        .n-form-item-feedback-wrapper {
          padding: 0 !important;
          min-height: 10px !important;
        }
      }

      .choose_bank {
        justify-content: space-between;
        gap: 10px !important;

        .choose_bank_l {
          width: 240px;
          height: 40px;
          background: #212443;
          border: 1px solid #26294C;
          border-radius: 8px;
          padding: 0 6px 0 12px;
          justify-content: space-between;
          gap: 0 !important;

          .bank_cname {
            width: 190px;
            line-height: 16px;
          }
        }

        .change_btn {
          display: inline-block;
          text-align: center;
          width: 80px;
          height: 40px;
          line-height: 40px;
        }
      }

      .error {
        margin-top: 20px;
        text-align: center;
        color: rgba(209, 99, 99, 1);
      }

      .cardItem {
        margin: 0 auto 20px;

        .bank_list {
          width: 100%;
          gap: 20px 18px !important;
          max-height: 310px;
          overflow-y: auto;

          .bank_item {
            font-size: 14px;
            width: 374px;
            height: 84px;
            background: #212443;
            border: 1px solid #26294C;
            border-radius: 8px;
            gap: 18px !important;

            //&:active {
            //  transform: scale(.95);
            //}
            .bank_l_icon {
              position: relative;
              width: 48px;
              height: 48px;
              margin-left: 14px;
              display: flex;
              flex: none;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              background: #fff;
              border: 1px solid rgba(229, 229, 255, 1);

              &::after {
                content: '';
                position: absolute;
                top: -5px;
                left: 60px;
                width: 1px;
                height: 48px;
                background: url("/img/payment/line2.webp?t=@{timestamp}") no-repeat;
                background-size: 100%;
              }

              img {
                width: 44px;
              }
            }

            .bank_l_name {
              padding: 0 10px;
              width: 246px;
              text-align: left;

              &.usdt_l_name {
                width: 320px;
              }

              p {
                padding: 0;
                margin: 0 0 4px;
              }

              p:last-child {
                font-size: 16px;
                font-weight: 600;
              }
            }
          }
        }
      }

    }


    .info {
      .code_box {
        width: 94px;
      }

      .btn {
        color: #fff;
        height: 40px !important;
        width: 90px;
        font-size: 14px;
        margin-left: 0;
        margin-top: 8px;
      }

      .phoneCard {

        //.bank_l_name {
        //  margin-left: 29px;
        //}
        .bank_item {
          .bank_l_icon {
            img {
              width: 26px !important;
            }
          }
        }
      }
    }

    .capital {
      .cardItem {
        p {
          width: 100%;
          text-align: center;
          font-weight: 600;
          height: 40px;
          line-height: 40px;
        }
      }
    }

    .cz_btn {
      margin: 10px auto 10px;

      a {
        display: block;
        width: 330px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
    }

    .error_txt {
      gap: 6px !important;
      color: #E54A45;
    }

  }
}

// 弹窗提示
.tips_sm_modal {
  &.form_card {
    width: 504px !important;

    :deep(.n-card__content) {
      padding: 0 !important;

      .header {
        position: relative;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 2px solid rgba(38, 41, 76, 1);

        .close {
          right: 20px;
        }
      }
    }
  }
}
</style>
